<template>
    <div class="full-screen-div">
        <HeaderComponent v-if="recordInfo!=null" @go-back="goBack" :title="title" />
        <div v-if="recordInfo!=null && nodes.length !=0" class="context">
            <SingleRecord  :record-info="recordInfo" :nodes="nodes" />
            <div v-if="recordInfo.statusId > 0" class="action">
                <div class="title">操作</div>
                <el-button type="danger" @click="showCancelDialog = true">撤销</el-button>
            </div>
        </div>
    </div>

    <!-- 撤销确认弹窗 -->
    <el-dialog
        title="确认撤销"
        v-model="showCancelDialog"
        width="60%"
        :before-close="handleClose">
        <span>确定要撤销这条申请吗？</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showCancelDialog = false">取消</el-button>
                <el-button type="danger" @click="handleCancel">确认撤销</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { getPersonalSingleRecord, revokeApplication } from "../../api/approval";
import HeaderComponent from "../../component/Header.vue";
import SingleRecord from "../../component/SingleRecord.vue";
import { getProcessDetail } from "../../api/application.js";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import router from "../../router/index.js"; // 确保路径正确
const goBack = () => {
  router.push('/applicationRecordsList'); // 返回申请记录列表页
};
const route = useRoute();
const title = ref();
const recordInfo = ref(null);
const nodes = ref([]);
const recordId =ref();
const empId =ref();
const showCancelDialog = ref(false); // 控制弹窗显示的变量



const handleCancel = async () => {
    const res = await revokeApplication(recordInfo.value.recordId);
    console.log("撤销申请", res);
    if (res.flag) {
        // 如果撤销成功，关闭弹窗并刷新页面或更新状态
        showCancelDialog.value = false;
        initSingleRecord();
        ElMessage({ message: "撤销成功", type: "success" });
    } else {
        showCancelDialog.value = false;
        ElMessage({ message: "撤销失败", type: "danger" });
    }
};

const handleClose = () => {
    showCancelDialog.value = false;
};
const initSingleRecord = async()=>{
    console.log("ApplicationSingleRecord mounted");

    console.log("recordId", recordId);
    console.log("empId", empId);
    const res = await getPersonalSingleRecord(recordId.value, empId.value);
    console.log("获取申请记录", res);
    if (res.flag) {
        recordInfo.value = res.result;
        title.value = recordInfo.value.name + "的" + recordInfo.value.flowName + "申请";
    }

    const nodeRes = await getProcessDetail(recordInfo.value.flowId);
    console.log("获取审批节点", nodeRes);
    if (nodeRes.flag) {
        for (let i = 0; i < nodeRes.result.processNodes.length; i++) {
            if (nodeRes.result.processNodes[i].nodePriority >0) {
                nodes.value.push(nodeRes.result.processNodes[i]);
            }
        }
    } else {
        ElMessage({ message: "获取审批节点失败", type: "error"
    });
    }
}
onMounted(async () => {
    recordId.value = route.params.recordId;
    empId.value = route.params.empId;
    await initSingleRecord();
});
</script>

<style scoped>
.full-screen-div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E1EFFF;
    display: flex;
    flex-direction: column;
}

.context{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 5px;
    height: 100%;
    overflow-y: scroll;
}

.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #021148;
}
.action {
    position: relative;
    margin: 5px;
    padding: 10px;
    border: 1px solid white;
    border-radius: 5px;
    background-color: #fff;
    width: 90%;
}
</style>